<template>
    <el-popover
        v-if="!placeholder"
        placement="top-start"
        width="300"
        trigger="hover"
        :disabled="content.length <= length">
        <span v-html="content"></span>
        <span slot="reference" v-if="content.length <= length">{{ content }}</span>
        <span slot="reference" v-if="content.length > length">{{ content.substr(0, length) + "..." }}</span>
    </el-popover>
    <el-popover
        v-else
        placement="top-start"
        width="300"
        trigger="hover">
        <span v-html="content"></span>
        <span slot="reference">
              <el-button type="text" size="mini">{{ placeholder }}</el-button>
        </span>
    </el-popover>
</template>

<script>

export default {
    name: "table-popover",
    data() {
        return {
            content: '',
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        text: String,
        length: {
            type: Number,
            default: 8
        },
        placeholder: {
            type: String,
            default: ""
        },
    },
    methods: {},
    watch: {
        text: function (val, oldVal) {
            if (val) {
                this.content = val;
            } else {
                this.content = '';
            }
        }
    },
    created() {
        if (this.text) {
            this.content = this.text;
        }
    },
}
</script>

<style scoped>

</style>
